<template>
	<view class="container">
		<!-- 状态筛选 -->
		<view class="filter-tabs">
			<uv-tabs :list="statusTabs" :current="currentIndex" @change="switchStatusByIndex" keyName="label"
				:scrollable="false" active-color="#fe5400" lineColor="#fe5400" inactive-color="#666"
				font-size="28"></uv-tabs>
		</view>

		<!-- 搜索 -->
		<view class="search">
			<uv-search placeholder="请输入产品型号" v-model="keyword" shape="square" bgColor="#FFFFFF" :showAction="false"
				@search="search"></uv-search>
		</view>

		<!-- 商品列表 -->
		<scroll-view class="goods-list-container" scroll-y @scrolltolower="loadMore" refresher-enabled="true"
			:refresher-triggered="triggered" refresher-threshold="100" @refresherrefresh="onRefresh">
			<view class="list-container">
				<!-- 空状态 -->
				<uv-empty v-if="!loading && list.length === 0" mode="data" text="暂无商品数据" marginTop="50"></uv-empty>

				<!-- 商品列表 -->
				<view class="goods-list" v-if="list.length > 0">
					<view class="goods-item" v-for="(item, index) in list" :key="item.id">
						<!-- 商品图片 -->
						<view class="goods-image-container" @click="goToDetail(item)">
							<image class="goods-image" :src="item.image || '/static/images/default-goods.png'"
								mode="aspectFill" @error="onImageError(index)"></image>
							<view class="goods-status-tag" :class="item.status">
								{{ item.status === 'normal' ? '上架中' : '仓库中' }}
							</view>
							<!-- 爆品标签 -->
							<view class="hot-tag" v-if="item.is_hot === 1">
								爆品
							</view>
						</view>

						<!-- 商品信息 -->
						<view class="goods-info">
							<!-- 商品类目和型号 -->
							<view class="goods-category-model">
								<text class="goods-category">{{ item.category_name || '未分类' }}</text>
								<text class="goods-model">{{ item.model || '无型号' }}</text>
							</view>

							<!-- 商品标题 -->
							<text class="goods-title" @click="goToDetail(item)">{{ item.title }}</text>

							<!-- 商品产地和品牌 -->
							<view class="goods-origin-brand">
								<text class="goods-origin">{{ item.origin || '未知产地' }}</text>
								<text class="goods-brand">{{ item.brand_name || '未知品牌' }}</text>
							</view>

							<!-- 发货地 -->
							<view class="goods-shipment">
								<text class="shipment-label">发货地：</text>
								<text class="shipment-value">{{ item.area_name || '未知地区' }}</text>
							</view>

							<!-- 商品价格和库存 -->
							<view class="goods-price-stock">
								<view class="price-container">
									<text class="price-symbol">¥</text>
									<text class="price-value">{{ item.price || '0.00' }}</text>
								</view>
								<text class="stock-info">库存
									{{ item.sku_items && item.sku_items[0] ? item.sku_items[0].stock : 0 }}</text>
							</view>

							<!-- 商品统计信息 -->
							<!-- <view class="goods-stats">
								<view class="stat-item">
									<text class="stat-value">{{ item.sales || 0 }}</text>
									<text class="stat-label">销量</text>
								</view>
								<view class="stat-item">
									<text class="stat-value">{{ item.comment || 0 }}</text>
									<text class="stat-label">评论</text>
								</view>
								<view class="stat-item">
									<text class="stat-value">{{ item.praise || 0 }}</text>
									<text class="stat-label">好评</text>
								</view>
								<view class="stat-item">
									<text class="stat-value">{{ item.like || 0 }}</text>
									<text class="stat-label">收藏</text>
								</view>
							</view> -->

							<!-- 操作按钮区域 -->
							<view class="action-buttons">
								<!-- 爆品开关 -->
								<view class="hot-action" @tap.stop="handleHotSwitch(item)"
									v-if="item.shop_is_open_hot === 1">
									<text class="action-label">设为爆品</text>
									<uv-switch :model-value="item.is_hot === 1" size="20" activeColor="#fe5400"
										:disabled="true"></uv-switch>
								</view>

								<!-- 编辑按钮 -->
								<view class="edit-btn" @tap.stop="goToEdit(item)">
									<uv-icon name="edit-pen" color="#fff" size="16"></uv-icon>
									<text class="btn-text">编辑</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 初次加载状态 -->
				<uv-loading-icon v-if="loading && list.length >= 0" text="加载中" mode="circle"
					size="36"></uv-loading-icon>

				<!-- 加载更多 -->
				<view class="load-more" v-if="hasMore && list.length > 0">
					<uv-loading-icon mode="circle" size="28"></uv-loading-icon>
					<text class="load-text">加载中...</text>
				</view>

				<view class="no-more" v-if="!hasMore && list.length > 0">
					<text class="no-more-text">没有更多数据了</text>
				</view>
			</view>
		</scroll-view>

		<!-- 添加商品按钮 -->
		<view class="add-goods-btn" @click="goToAddGoods">
			<uv-icon name="plus" color="#fff" size="22"></uv-icon>
			<text class="btn-text">添加商品</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				loading: true,
				refreshing: false,
				triggered: false,
				currentStatus: 'all',
				currentIndex: 0,
				statusTabs: [{
						label: '全部',
						value: 'all'
					},
					{
						label: '上架中',
						value: 'normal'
					},
					{
						label: '仓库中',
						value: 'hidden'
					}
				],
				list: [],
				pagination: {
					page: 1,
					per_page: 10,
					total: 0,
					last_page: 1
				}
			};
		},
		computed: {
			hasMore() {
				return this.pagination.page < this.pagination.last_page;
			}
		},
		onShow() {
			this.loadData(true);
		},
		onReachBottom() {
			if (!this.loading && this.hasMore) {
				this.pagination.page++;
				this.loadData(false);
			}
		},
		methods: {
			// 加载数据
			async loadData(reset = false) {
				if (reset) {
					this.pagination.page = 1;
					this.list = [];
				}

				if (reset) {
					this.loading = true;
				}

				try {
					const res = await uni.$uv.http.get('/supplier/getGoodsList', {
						params: {
							page: this.pagination.page,
							status: this.currentStatus,
							model: this.keyword,
						}
					});

					if (res.res.code === 1) {
						const newList = res.res.data.list || [];
						if (reset) {
							this.list = newList;
						} else {
							this.list = [...this.list, ...newList];
						}

						this.pagination = {
							page: res.res.data.current_page || 1,
							per_page: res.res.data.per_page || 10,
							total: res.res.data.total || 0,
							last_page: res.res.data.last_page || 1
						};
					} else {
						this.$wanlshop.msg(res.res.msg || '获取数据失败');
					}
				} catch (error) {
					console.error('获取商品列表失败:', error);
					this.$wanlshop.msg('获取失败，请稍后重试');
				} finally {
					this.loading = false;
					this.refreshing = false;
					this.triggered = false;
				}
			},

			search(value) {
				this.keyword = value;
				this.loadData(true);
			},

			// 切换状态
			switchStatusByIndex(item) {
				this.currentIndex = item.index;
				this.currentStatus = item.value;
				this.loadData(true);
			},

			// 下拉刷新
			onRefresh() {
				this.refreshing = true;
				this.triggered = true;
				this.loadData(true);
			},

			// 加载更多
			loadMore() {
				if (!this.loading && this.hasMore) {
					this.pagination.page++;
					this.loadData(false);
				}
			},

			// 图片加载失败
			onImageError(index) {
				this.list[index].image = '/static/images/default-goods.png';
				this.$forceUpdate();
			},

			// 跳转到商品详情
			goToDetail(item) {
				this.$wanlshop.to(`/pages/supplier/goods/detail?id=${item.id}`)
			},

			// 跳转到添加商品页面
			goToAddGoods() {
				this.$wanlshop.to('/pages/supplier/goods/add')
			},

			// 跳转到编辑商品页面
			goToEdit(item) {
				this.$wanlshop.to(`/pages/supplier/goods/add?id=${item.id}`)
			},

			// 处理爆品开关点击
			async handleHotSwitch(item) {
				try {
					const isHot = item.is_hot === 1;
					const api = isHot ? '/supplier/closeHot' : '/supplier/openHot';
					const res = await uni.$uv.http.post(api, {
						goods_id: item.id
					});

					if (res.res.code === 1) {
						this.$wanlshop.msg(isHot ? '已取消爆品' : '已设为爆品');
						// 更新本地数据
						item.is_hot = isHot ? 0 : 1;
						this.$forceUpdate();
					} else {
						this.$wanlshop.msg(res.res.msg || '操作失败');
					}
				} catch (error) {
					console.error('切换爆品状态失败:', error);
					this.$wanlshop.msg('操作失败，请稍后重试');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
		background-color: #f8f9fa;
		min-height: 100vh;
		box-sizing: border-box;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.filter-tabs {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 8rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	}

	.search {
		margin-bottom: 20rpx;
	}

	.goods-list-container {
		flex: 1;
		overflow: hidden;

		.list-container {
			padding-bottom: 30rpx;
		}

		.goods-list {

			.goods-item {
				display: flex;
				background-color: #ffffff;
				border-radius: 16rpx;
				padding: 24rpx;
				margin-bottom: 20rpx;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);

				.goods-image-container {
					position: relative;
					width: 200rpx;
					height: 200rpx;
					margin-right: 24rpx;
					border-radius: 12rpx;
					overflow: hidden;

					.goods-image {
						width: 100%;
						height: 100%;
						background-color: #f5f5f5;
					}

					.goods-status-tag {
						position: absolute;
						top: 10rpx;
						right: 10rpx;
						padding: 6rpx 12rpx;
						border-radius: 20rpx;
						font-size: 20rpx;

						&.normal {
							background-color: rgba(76, 175, 80, 0.9);
							color: white;
						}

						&.hidden {
							background-color: rgba(158, 158, 158, 0.9);
							color: white;
						}
					}

					.hot-tag {
						position: absolute;
						top: 10rpx;
						left: 10rpx;
						padding: 6rpx 12rpx;
						border-radius: 20rpx;
						font-size: 20rpx;
						background-color: rgba(254, 84, 0, 0.9);
						color: white;
					}
				}

				.goods-info {
					flex: 1;
					display: flex;
					flex-direction: column;

					.goods-category-model {
						display: flex;
						align-items: center;
						margin-bottom: 12rpx;

						.goods-category {
							font-size: 24rpx;
							color: #666666;
							background-color: #f0f0f0;
							padding: 4rpx 12rpx;
							border-radius: 20rpx;
							margin-right: 12rpx;
						}

						.goods-model {
							font-size: 24rpx;
							color: #999999;
						}
					}

					.goods-title {
						font-size: 30rpx;
						font-weight: bold;
						color: #333333;
						margin-bottom: 16rpx;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.goods-origin-brand {
						display: flex;
						align-items: center;
						margin-bottom: 12rpx;

						.goods-origin,
						.goods-brand {
							font-size: 24rpx;
							color: #666666;
							margin-right: 20rpx;
						}
					}

					.goods-shipment {
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;

						.shipment-label {
							font-size: 24rpx;
							color: #999999;
						}

						.shipment-value {
							font-size: 24rpx;
							color: #666666;
						}
					}

					.goods-price-stock {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 20rpx;

						.price-container {
							display: flex;
							align-items: baseline;

							.price-symbol {
								font-size: 24rpx;
								color: #ff3b30;
								font-weight: bold;
							}

							.price-value {
								font-size: 32rpx;
								color: #ff3b30;
								font-weight: bold;
							}
						}

						.stock-info {
							font-size: 24rpx;
							color: #999999;
						}
					}

					.goods-stats {
						display: flex;
						justify-content: space-between;
						border-top: 1rpx solid #f0f0f0;
						padding-top: 16rpx;
						margin-bottom: 16rpx;

						.stat-item {
							display: flex;
							flex-direction: column;
							align-items: center;

							.stat-value {
								font-size: 24rpx;
								color: #333333;
								font-weight: bold;
							}

							.stat-label {
								font-size: 20rpx;
								color: #999999;
								margin-top: 4rpx;
							}
						}
					}

					// 操作按钮区域
					.action-buttons {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding-top: 16rpx;
						border-top: 1rpx solid #f0f0f0;

						.hot-action {
							display: flex;
							align-items: center;

							.action-label {
								font-size: 24rpx;
								color: #666666;
								margin-right: 16rpx;
							}
						}

						.edit-btn {
							display: flex;
							align-items: center;
							justify-content: center;
							background: linear-gradient(135deg, #fe5400, #ff7b33);
							border-radius: 20rpx;
							padding: 10rpx 20rpx;
							box-shadow: 0 4rpx 12rpx rgba(254, 84, 0, 0.3);

							.btn-text {
								font-size: 24rpx;
								color: #fff;
								margin-left: 8rpx;
								font-weight: 500;
							}
						}
					}
				}
			}
		}

		/* 加载更多 */
		.load-more,
		.no-more {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 30rpx 0;

			.load-text,
			.no-more-text {
				font-size: 26rpx;
				color: #999;
				margin-left: 15rpx;
			}
		}
	}

	.add-goods-btn {
		position: fixed;
		right: 30rpx;
		bottom: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #fe5400, #ff7b33);
		border-radius: 20rpx;
		box-shadow: 0 8rpx 30rpx rgba(254, 84, 0, 0.4);
		z-index: 999;
		transition: all 0.3s ease;
		padding: 14rpx 24rpx;

		&:active {
			transform: scale(0.95);
			box-shadow: 0 4rpx 15rpx rgba(254, 84, 0, 0.6);
		}

		.btn-text {
			font-size: 22rpx;
			color: #fff;
			margin-top: 8rpx;
			font-weight: 500;
		}
	}
</style>